<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2017 by EzrealNi (http://jsbin.com/nofiqez/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=1000">
	<title>音标发音表</title>
	<style id="jsbin-css">
		html,
		body {
			height: 100%;
		}

		* {
			padding: 0;
			margin: 0;
		}

		table {
			width: 100%;
		}

		.main {
			padding: 0px 10px;
		}

		.title {
			padding: 10px 0px;
		}

		.yb1 td:hover {
			background: #6FDF81;
		}

		.yb1 td {
			cursor: pointer;
			position: relative;
			height: 50px;
			padding-left: 5px;
		}
	</style>
</head>

<body>
	<div class="main">
		<h3 class="title">音标发音表:（点击一下音标，即发音）</h3>
		<div class="ta yb1">
			<table border="2" width="958" cellspacing="0" cellpadding="2" bordercolor="#85B989" id="__02" style="line-height: 200%;font-size:11pt;">
				<tbody>
					<tr>
						<th colspan="8" align="center" height="43">
							<b>48个国际音标发音表（英语语音 带发音规则）</b></th>
					</tr>
					<tr>
						<th rowspan="5" width="33">元音</th>
						<td width="155" mp3="i-2.mp3" class="yb" title="鼠标稍停留……即发音">[i:]衣 发长点</td>
						<td width="147" mp3="i-1.mp3" title="鼠标稍停留……即发音">[i]衣 急促地发声</td>
						<td width="165" mp3="e-1.mp3" title="鼠标稍停留……即发音">[e]哎 不把ī音读出来</td>
						<td width="147" mp3="an-1.mp3" title="鼠标稍停留……即发音">[æ]哎 不把ī音读出</td>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="2-1.mp3" title="鼠标稍停留……即发音">[ʌ] 阿 嘴微微张开</td>
						<td width="147" mp3="er-1.mp3" title="鼠标稍停留……即发音">[ə:]额 发长音</td>
						<td width="165" mp3="e2-1.mp3" title="鼠标稍停留……即发音">[ə]额 发短音</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="u-2.mp3" title="鼠标稍停留……即发音">[u:]乌 声音拖长</td>
						<td width="147" mp3="u-1.mp3" title="鼠标稍停留……即发音">[u]乌 急促</td>
						<td width="165" mp3="o-2.mp3" title="鼠标稍停留……即发音">[ɔ:]哦 声音拖长</td>
						<td width="147" mp3="o-1.mp3" title="鼠标稍停留……即发音">[ɔ]哦 急促</td>
						<td width="143" mp3="a-2.mp3" title="鼠标稍停留……即发音">[a:]啊 嘴长到最大</td>
					</tr>
					<tr>
						<td width="155" mp3="ei.mp3" title="鼠标稍停留……即发音">[ei]像“诶”的声音</td>
						<td width="147" mp3="ai.mp3" title="鼠标稍停留……即发音">[ai]唉</td>
						<td width="165" mp3="oi.mp3" title="鼠标稍停留……即发音">[ɔi]哦－喂 连着读</td>
						<td width="147" mp3="eu.mp3" title="鼠标稍停留……即发音">[əu]呕</td>
						<td width="143" mp3="ao.mp3" title="鼠标稍停留……即发音">[au]傲</td>
					</tr>
					<tr>
						<td width="155" mp3="ir.mp3" title="鼠标稍停留……即发音">[iə]衣－饿 连着读</td>
						<td width="147" mp3="er.mp3" title="鼠标稍停留……即发音">[εə]哎－饿 连着读</td>
						<td width="165" mp3="uer.mp3" title="鼠标稍停留……即发音">[uə]乌－饿 连着读</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<th rowspan="9" width="33">辅音</th>
						<td width="155" mp3="p.mp3" title="鼠标稍停留……即发音">[p]普 轻音不发ī</td>
						<td width="147" mp3="t.mp3" title="鼠标稍停留……即发音">[t]特 轻音不发è</td>
						<td width="165" mp3="k.mp3" title="鼠标稍停留……即发音">[k]克 轻音不发è</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="b.mp3" title="鼠标稍停留……即发音">[b]不 浊音不发ù</td>
						<td width="147" mp3="d.mp3" title="鼠标稍停留……即发音">[d]得 浊音不发é</td>
						<td width="165" mp3="g.mp3" title="鼠标稍停留……即发音">[g]各 浊音不发è</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="f.mp3" title="鼠标稍停留……即发音">[f]福 轻音不发ú</td>
						<td width="147" mp3="s.mp3" title="鼠标稍停留……即发音">[s]丝 轻音不发ī</td>
						<td width="165" mp3="ss.mp3" title="鼠标稍停留……即发音">[ʃ]西 轻音不发ī</td>
						<td width="147" mp3="si.mp3" title="鼠标稍停留……即发音">[θ]齿咬舌头的轻音</td>
						<td width="143" mp3="h.mp3" title="鼠标稍停留……即发音">[h]喝 轻音不读ē</td>
					</tr>
					<tr>
						<td width="155" mp3="v.mp3" title="鼠标稍停留……即发音">[v]呜 浊音不发ú</td>
						<td width="147" mp3="z.mp3" title="鼠标稍停留……即发音">[z]就是/s/的浊音</td>
						<td width="165" mp3="n3.mp3" title="鼠标稍停留……即发音">[ʒ]衣 浊音不发ī</td>
						<td width="147" mp3="qq.mp3" title="鼠标稍停留……即发音">[ð]齿咬舌头的浊音</td>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="tss.mp3" title="鼠标稍停留……即发音">[tʃ]七 轻音不发ī</td>
						<td width="147" mp3="tr.mp3" title="鼠标稍停留……即发音">[tr]缺 轻音不发uē</td>
						<td width="165" mp3="ts.mp3" title="鼠标稍停留……即发音">[ts]次 轻音不发ì</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="d3.mp3" title="鼠标稍停留……即发音">[dʒ]姬 浊音不发ī</td>
						<td width="147" mp3="dr.mp3" title="鼠标稍停留……即发音">[dr]撅 浊音不发uē</td>
						<td width="165" mp3="dz.mp3" title="鼠标稍停留……即发音">[dz]自 浊音不发ì</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="m.mp3" title="鼠标稍停留……即发音">[m]（见下方）</td>
						<td width="147" mp3="n.mp3" title="鼠标稍停留……即发音">[n]（见下方）</td>
						<td width="165" mp3="ng.mp3" title="鼠标稍停留……即发音">[ŋ]（见下方）</td>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="l.mp3" title="鼠标稍停留……即发音">[l]（见下方）</td>
						<td width="147" mp3="r.mp3" title="鼠标稍停留……即发音">[r]蕊 浊音 不发uǐ</td>
						<th width="165">　</th>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<td width="155" mp3="w.mp3" title="鼠标稍停留……即发音">[w]我 浊音不发ǒ</td>
						<td width="147" mp3="j.mp3" title="鼠标稍停留……即发音">[j]呀 浊音不发ǎ</td>
						<th width="165">　</th>
						<th width="147">　</th>
						<th width="143">　</th>
					</tr>
					<tr>
						<th colspan="8" align="left" style="font-weight: 400">[m] 嘴巴闭住，然后发音，气流从鼻子出来，浊音<br> [n] 嘴巴微张，舌尖顶住上颚，气流从鼻子出来而不是从嘴巴出来，浊音<br> [ŋ] 嘴巴长大，舌头向下弯曲，气流从鼻子出来而不是从嘴巴出来，浊音<br> [l] 有两个读音。一是放在音标结尾发呕，浊音；二是放在音标中发了，浊音</th>
					</tr>
				</tbody>
			</table>
		</div>

	</div>
	<script id="jsbin-javascript">
		window.onload = function () {
			bindEvent();
		};

		var bindEvent = function () {
			var table = document.querySelector('table');
			addEvent(table, hasTouch(), tdEvent);
			function tdEvent(e) {
				var node = e.target;
				if (node.nodeName === 'TD') {
					var url = 'sounds/';
					var mp3 = node.getAttribute('mp3');
					play(url + mp3);
				}
			}
		};

		var hasTouch = function () {
			var touchObj = {};
			touchObj.isSupportTouch = "ontouchstart" in document ? true : false;
			touchObj.isEvent = touchObj.isSupportTouch ? 'touchstart' : 'click';
			return touchObj.isEvent;
		}

		var addEvent = function (obj, type, handle) {
			try {  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
				obj.addEventListener(type, handle, false);
			} catch (e) {
				try {  // IE8.0及其以下版本
					obj.attachEvent('on' + type, handle);
				} catch (e) {  // 早期浏览器
					obj['on' + type] = handle;
				}
			}
		}

		var play = function (url) {
			console.log(url);
			var audio = document.createElement('audio');
			var source = document.createElement('source');
			source.type = "audio/mpeg";
			source.type = "audio/mpeg";
			source.src = url;
			audio.appendChild(source);
			audio.play();
		}

	</script>
</body>

</html>